<!-- pages/demo/demo.vue -->
<template>
	<view class="container">
		<vertical-tabs v-model="currentTab" :tabs="tabList" @change="onTabChange" />
		<vertical-tabs v-model="currentTab" :tabs="tabList">
			<template #default="{ current, tabs }">
				<view class="custom-content">
					<text>当前选中：{{ tabs[current].title }}</text>
					<image
						v-if="current === 0"
						src="/static/recommend.png"
						mode="widthFix"
					/>
					<view v-else-if="current === 1">👗 女装专区</view>
					<view v-else>自定义内容...</view>
				</view>
			</template>
		</vertical-tabs>
	</view>
</template>

<script>
import VerticalTabs from '@/components/VerticalTabs/VerticalTabs.vue';

export default {
	components: {
		VerticalTabs,
	},
	data() {
		return {
			currentTab: 0,
			tabList: [
				{ title: '推荐', content: '这里是推荐内容' },
				{ title: '女装', content: '女装商品列表' },
				{ title: '数码', content: '手机、电脑等' },
				{ title: '食品', content: '零食、生鲜、饮料' },
				{ title: '家居', content: '家具、家纺、装修' },
			],
		};
	},
	methods: {
		onTabChange(index) {
			console.log('切换到:', index);
		},
	},
};
</script>

<style>
.container {
	height: 100vh;
	padding: 10px;
	box-sizing: border-box;
}
</style>
